{% extends "base.html" %}

{% block nav %}
  {% include "stock/nav.html" %}
{% endblock %}

{% block subnav %}
  {% if quote %}
    {{ quote }}
    <ul>
      <li>Snapshot Summary</li>
      <li>News</li>
      <li>Financials</li>
      <li><a href="/stock/{{ quote }}/price">Historical prices</a></li>
      <li><a href="/stock/{{ quote }}/chart">Technical Chart</a></li>    
      <li>VI Statistics</li>
      <li>Profile</li>
    </ul>  
  {% endif %} 
{% endblock %}

{% block toolbar %}
{{ quote }} : Chart
{% endblock %}

{% block addition_header %}

    
    
    <script src="/static/amcharts/amstock.js" type="text/javascript"></script>
    <link rel="stylesheet" href="/static/amcharts/style.css" type="text/css">    
		<script type="text/javascript">
			AmCharts.ready(function () {
				createStockChart();
			});


            
			var chart;
			var newPanel;
			var stockPanel;
      
      var chartData = [
      {% for price in stockprice %}{date:new Date({{ price.Date|date:"Y" }},{{ price.Date|date:"m" }}-1,{{ price.Date|date:"d" }}) {% for key,value in price.items %}{% if value %}{% if value != 'Null' and key != 'Date' and key != 'Quote' %},{{ key|lower }}:{{ value|floatformat:2 }}{% endif %}{% endif %}{% endfor %}}{% if not forloop.last %},{% endif %}
      {% endfor %}]; 
      
			function createStockChart() {
				chart = new AmCharts.AmStockChart();
				chart.pathToImages = "/static/amcharts/images/";
 



				// DATASET //////////////////////////////////////////
				var dataSetMain = new AmCharts.DataSet();
        
				dataSetMain.fieldMappings = [{% for field in fieldList %}
          { fromField: "{{field}}", toField: "{{field}}" }{% if not forloop.last %},{% endif %}{% endfor %}
        ];
        
				dataSetMain.color = "#7f8da9";
				dataSetMain.dataProvider = chartData;
				dataSetMain.categoryField = "date";
        dataSetMain.title = "Stock";
              
				chart.dataSets = [dataSetMain];

				// PANELS ///////////////////////////////////////////                                                  
				var stockMainPanel = new AmCharts.StockPanel();
				stockMainPanel.title = "Value";
				stockMainPanel.panEventsEnabled = true;
        
				// graph of first stock panel
				var graph = new AmCharts.StockGraph();
				graph.type = "candlestick";
				graph.openField = "open";
				graph.closeField = "close";
				graph.highField = "high";
				graph.lowField = "low";
				graph.valueField = "close";
				graph.lineColor = "#2FAD31";
				graph.fillColors = "#2FAD31";
				graph.negativeLineColor = "#db4c3c";
				graph.negativeFillColors = "#db4c3c";
				graph.fillAlphas = 1;
				graph.showBalloon = false;
				graph.useDataSetColors = false;
				graph.legendValueText = "open:[[open]] close:[[close]] low:[[low]] high:[[high]]";
        graph.balloonText = "open:[[open]]\nclose:[[close]]\nlow:[[low]]\nhigh:[[high]]";
				stockMainPanel.addStockGraph(graph);

				var stockLegend = new AmCharts.StockLegend();
				stockLegend.markerType = "square";
				stockLegend.markerSize = 16;
        stockLegend.switchType = "x";
				stockLegend.valueTextRegular = undefined;
				stockLegend.valueWidth = 250;
				stockMainPanel.stockLegend = stockLegend;
  
        //EMA 22 Graph /////////////////////////////////////////
        var graph2 = new AmCharts.StockGraph();
        graph2.type = "line";
        graph2.title = "EMA(22)";
        graph2.valueField = "ema22";
        graph2.lineThickness = 2;
        graph2.fillAlphas = 0;
				//graph2.lineColor = "#F21DCB";
				//graph2.fillColors = "#CF1BAE";
        graph2.bullet = "round";
        graph2.bulletSize = 1;
				graph2.showBalloon = false;
				graph2.useDataSetColors = false;
				graph2.legendValueText = "[[ema22]]";
        graph2.balloonText = "ema22:[[ema22]]";
        stockMainPanel.addStockGraph(graph2);
        
        //EMA 60 Graph /////////////////////////////////////////
        var graph3 = new AmCharts.StockGraph();
        graph3.type = "line";
        graph3.title = "EMA(60)";
        graph3.valueField = "ema60";
        graph3.lineThickness = 2;
        graph3.fillAlphas = 0;
				//graph3.lineColor = "#F21DCB";
				//graph3.fillColors = "#CF1BAE";
        graph3.bullet = "round";
        graph3.bulletSize = 1;
				graph3.showBalloon = false;
				graph3.useDataSetColors = false;
				graph3.legendValueText = "[[ema60]]";
        graph3.balloonText = "ema60:[[ema60]]";
        stockMainPanel.addStockGraph(graph3);
        

     
        
        
        
        
        //Volume Panel /////////////////////////////////////////
				var volumePanel = new AmCharts.StockPanel();
				volumePanel.allowTurningOff = true;
				volumePanel.title = "Volume";
        volumePanel.percentHeight = 5;
				volumePanel.showCategoryAxis = false;
				volumePanel.panEventsEnabled = true;

				var graphVolume = new AmCharts.StockGraph();
				graphVolume.valueField = "volume";
        graphVolume.type = "column";
				volumePanel.addStockGraph(graphVolume);

				var volumeLegend = new AmCharts.StockLegend();
				volumeLegend.markerType = "none";
				volumeLegend.markerSize = 0;
				volumePanel.stockLegend = volumeLegend;  

        //MACD Panel /////////////////////////////////////////
				var macdPanel = new AmCharts.StockPanel();
				macdPanel.allowTurningOff = true;
				macdPanel.title = "MACD(26,12,9)";
        macdPanel.percentHeight = 10;
				macdPanel.showCategoryAxis = false;
				macdPanel.panEventsEnabled = true;
        

				var macdGraph = new AmCharts.StockGraph();
        macdGraph.title = "MACD";
				macdGraph.valueField = "macd_12_26_9";
        macdGraph.type = "line";
        macdGraph.lineThickness = 2;
        //macdGraph.lineColor = "#637bb6";
        macdGraph.useDataSetColors = false;
				macdPanel.addStockGraph(macdGraph); 

				var macdSignalGraph = new AmCharts.StockGraph();
        macdSignalGraph.title = "Signal";
				macdSignalGraph.valueField = "macd_12_26_9_sign";
        macdSignalGraph.type = "line";
        macdSignalGraph.lineThickness = 2;
        //macdSignalGraph.lineColor = "#637bb6";
        macdSignalGraph.useDataSetColors = false;
				macdPanel.addStockGraph(macdSignalGraph);    

				var macdHistGraph = new AmCharts.StockGraph();
        macdHistGraph.title = "Histogram";
				macdHistGraph.valueField = "macd_12_26_9_diff";
        macdHistGraph.type = "column"; // this line makes the graph smoothed line.
				macdHistGraph.lineColor = "#2FAD31";
				macdHistGraph.fillColors = "#2FAD31";
				macdHistGraph.negativeLineColor = "#db4c3c";
				macdHistGraph.negativeFillColors = "#db4c3c";
				//macdHistGraph.fillAlphas = 1;
				macdHistGraph.showBalloon = false;
				macdHistGraph.useDataSetColors = false;
        macdHistGraph.lineThickness = 1;       
				macdPanel.addStockGraph(macdHistGraph);        

				var macdLegend = new AmCharts.StockLegend();
				macdLegend.markerType = "square";
				//macdLegend.markerSize = 0;
				macdPanel.stockLegend = macdLegend;         
        

        //adx Panel /////////////////////////////////////////
				var adxPanel = new AmCharts.StockPanel();
				adxPanel.allowTurningOff = true;
				adxPanel.title = "ADX(14)";
        adxPanel.percentHeight = 10;
				adxPanel.showCategoryAxis = false;
				adxPanel.panEventsEnabled = true;
        

				var adxGraph = new AmCharts.StockGraph();
        adxGraph.title = "adx";
				adxGraph.valueField = "adx_14_14";
        adxGraph.type = "line";
        adxGraph.lineThickness = 2;
        //adxGraph.lineColor = "#637bb6";
        adxGraph.useDataSetColors = false;
				adxPanel.addStockGraph(adxGraph); 

				var adxDIPGraph = new AmCharts.StockGraph();
        adxDIPGraph.title = "DI+";
				adxDIPGraph.valueField = "adx_14_14_dip";
        adxDIPGraph.type = "line";
        adxDIPGraph.lineThickness = 2;
        adxDIPGraph.lineColor = "#2FAD31";
        adxDIPGraph.useDataSetColors = false;
				adxPanel.addStockGraph(adxDIPGraph);    

				var adxDINGraph = new AmCharts.StockGraph();
        adxDINGraph.title = "DI-";
				adxDINGraph.valueField = "adx_14_14_din";
        adxDINGraph.type = "line";
        adxDINGraph.lineThickness = 2;
        adxDINGraph.lineColor = "#db4c3c";
        adxDINGraph.useDataSetColors = false;
				adxPanel.addStockGraph(adxDINGraph);    

        // value                
        var adxValueAxis = new AmCharts.ValueAxis();
        adxPanel.addValueAxis(adxValueAxis);

        // GUIDE
        var adxGuide1 = new AmCharts.Guide();
        adxGuide1.value = 23;
        adxGuide1.lineColor = "#CC0000";
        adxGuide1.dashLength = 4;
        adxGuide1.label = "_ _ strong line";
        adxGuide1.inside = true;
        adxGuide1.lineAlpha = 1;
        adxValueAxis.addGuide(adxGuide1);        

				var adxLegend = new AmCharts.StockLegend();
				adxLegend.markerType = "square";
				//adxLegend.markerSize = 0;
				adxPanel.stockLegend = adxLegend;                 
  
        // Build Chart /////////////////////////////////////
				chart.panels = [stockMainPanel,macdPanel,adxPanel,volumePanel];


				// OTHER SETTINGS ////////////////////////////////////
				var sbsettings = new AmCharts.ChartScrollbarSettings();
				sbsettings.graph = graph;
				sbsettings.graphType = "step";
        sbsettings.updateOnReleaseOnly = false;
				chart.chartScrollbarSettings = sbsettings;

        var categoryAxesSettings = new AmCharts.CategoryAxesSettings();
        categoryAxesSettings.equalSpacing = true;
        categoryAxesSettings.maxSeries = 250;
        chart.categoryAxesSettings = categoryAxesSettings ;   

        var chartCursorSettings = new AmCharts.ChartCursorSettings();
        chartCursorSettings.zoomable = false;
        //chartCursorSettings.cursorPosition = "mouse";
        //chartCursorSettings.cursorAlpha = 0;
        chart.chartCursorSettings = chartCursorSettings;      


                

				// PERIOD SELECTOR ///////////////////////////////////
				var periodSelector = new AmCharts.PeriodSelector();
				periodSelector.position = "bottom";
				periodSelector.periods = [{
					period: "DD",
					count: 15,
					label: "15 days"
				}, {
					period: "MM",
					selected: true,
					count: 1,
					label: "1 month"
				}, {
					period: "MM",
					selected: true,
					count: 3,
					label: "3 month"
				}, {
					period: "MM",
					selected: true,
					count: 6,
					label: "6 month"
				}, {
					period: "YYYY",
					count: 1,
					label: "1 year"
				}, {
					period: "YTD",
					label: "YTD"
				}, {
					period: "MAX",
					label: "MAX"
				}];
				chart.periodSelector = periodSelector;

				var panelsSettings = new AmCharts.PanelsSettings();
				panelsSettings.panEventsEnabled = true;
				chart.panelsSettings = panelsSettings;      

				chart.write('chartMain');
			}
			
		</script>
{% endblock %}

{% block content %}

		<div id="chartMain" style="width:98%; height:850px; margin-bottom:10px;"></div>


{% endblock %}